<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>点燃酒精灯</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
    <script src="node_modules/three/build/three.js"></script>
    <script src="node_modules/three/examples/js/loaders/GLTFLoader.js"></script>
    <script src="node_modules/three/examples/js/controls/OrbitControls.js"></script>
    <script src="node_modules/three/examples/js/controls/DragControls.js"></script>

</head>
<body>
<audio id='audioPlay' src='./src/3.wav' hidden></audio>

<script>

    let camera, scene, renderer,controls,orbiControls;
    let mixerjiujingdeng,mixerhuochai;
    let mesh,jiujingdeng,huochai,firebox,fireboxhuochai,firesprit;
    let openhuochaiaction,
        boolOpenhuochai = false,
        boolopendengmao = false,
        booljiujingdengfire = false,
        boolhuochaiscrap = false;


    let clock = new THREE.Clock();


    //鼠标选择
    let raycaster = new THREE.Raycaster();
    let mouse = new THREE.Vector2();


    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 400;

        scene = new THREE.Scene();

        let axesHelper = new THREE.AxesHelper( 500 );
        // scene.add( axesHelper );
        let light = new THREE.AmbientLight( "rgb(249,255,253)" ); // soft white light
        scene.add( light );
        let directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
        directionalLight.position = new THREE.Vector3( 50, 0, 0 );
        scene.add( directionalLight );
        // var helper = new THREE.DirectionalLightHelper( directionalLight, 50 );
        // scene.add( helper );
        // let directionalLight2 = new THREE.DirectionalLight( 0xffffff, 0.5 );
        // directionalLight2.position = new THREE.Vector3( 0, -50, 100 );
        // scene.add( directionalLight2 );

        scene.background = new THREE.TextureLoader().load( 'src/beijing.png' );




        //酒精灯上的火苗 firebox 的scale来控制
        firebox = new THREE.Object3D();
        firebox.position.set(40,-65,-12);
        // let axesHelper2 = new THREE.AxesHelper( 500 );
        // firebox.add( axesHelper2 );
        let texturehuomiao = new THREE.TextureLoader().load( 'src/jiujingdeng-huomiao.png' );
        let geometry = new THREE.BoxBufferGeometry( 30, 60, 0 );
        let material = new THREE.MeshBasicMaterial( { map: texturehuomiao,transparent:true } );
        let fire = new THREE.Mesh( geometry, material );
        fire.name = 'jiujingdengfire';
        fire.position.set(0,20,0);
        firebox.add(fire);
        firebox.scale.set(0,0,0);
        scene.add( firebox );
        // firebox.scale.set(0.5,0.5,0.5);



        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        // orbiControls = new THREE.OrbitControls( camera, renderer.domElement );

        //模型加载 火柴
        let loader = new THREE.GLTFLoader();
        loader.load( 'src/huochai.glb', function ( gltf ) {

            gltf.scene.scale.set(200,200,200);
            huochai=gltf;
            console.log(huochai);


            controls = new THREE.DragControls( [huochai.scene.children[0]], camera, renderer.domElement );
            controls.addEventListener( 'drag', function ( event ) {
                    let p = huochai.scene.children[0].position;
                    if( !booljiujingdengfire && boolopendengmao && p.x>0.328 && p.x<0.544 && p.y>-0.2 && p.y<-0.01486 ){
                        let i = 0;
                        let a = setInterval(function () {
                            i += 0.05;
                            firebox.scale.set(i,i,i);
                            if(i >= 1){
                                clearInterval(a);
                                //酒精灯火焰闪烁效果
                                let b = true;
                                setInterval(function () {
                                   if(b){
                                       firebox.scale.set(0.96,0.96,0.96);
                                       b = false;
                                   }
                                   else{
                                       firebox.scale.set(1,1,1);
                                       b = true;
                                   }
                                },100);
                            }
                        },100);
                        booljiujingdengfire = true;

                    }

            } );
            controls.addEventListener( 'dragend', function ( event ) {
               if(booljiujingdengfire && !boolhuochaiscrap){
                   boolhuochaiscrap = true;
                   let i = 0;
                   let a = setInterval(function () {
                       i += 0.015;
                       let b = 0.3 - i;
                       console.log(b);
                       firesprit.scale.set(b/2,b,b/2);

                       huochai.scene.children[0].children[0].material.color.r = 0.8 - (i * 0.04 /0.015);

                       if(i >= 0.3){
                           clearInterval(a);
                           firesprit.visible = false;
                       }
                   },100);
               }
            } );
            controls.addEventListener( 'hoveron', function ( event ) {
                if(event.object.name !== 'huochai'){
                    controls.deactivate();
                }
            } );
            controls.addEventListener( 'hoveroff', function ( event ) {
                if(event.object.name !== 'huochai'){
                    controls.activate();
                }
            } );


            fireboxhuochai = new THREE.Object3D();
            fireboxhuochai.name = 'firehuochai';
            fireboxhuochai.position.set(0,0.1,0.5);
            huochai.scene.children[0].add( fireboxhuochai );


            let spriteMap = new THREE.TextureLoader().load( 'src/jiujingdeng-huomiao.png' );
            let spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap } );
            firesprit = new THREE.Sprite( spriteMaterial );
            // firesprit.scale.set(0.15,0.3,0.15);
            firesprit.scale.set(0,0,0);
            fireboxhuochai.add( firesprit );


            scene.add( gltf.scene );
            mixerhuochai = new THREE.AnimationMixer( huochai.scene );
            console.log(gltf);

        } );

        //模型加载 酒精灯
        loader.load( 'src/jiujingdeng.glb', function ( gltf ) {

            gltf.scene.translateX(0);
            gltf.scene.translateZ(-10);
            gltf.scene.scale.set(200,200,200);

            gltf.scene.children[0].material.opacity = 0.5;
            gltf.scene.children[0].material.roughness = 0;
            gltf.scene.children[0].material.metalness = 0.3;
            gltf.scene.children[0].material.transparent = true;

            jiujingdeng = gltf;
            mixerjiujingdeng = new THREE.AnimationMixer( jiujingdeng.scene );

            // let axesHelper2 = new THREE.AxesHelper( 500 );
            // jiujingdeng.scene.children[0].add( axesHelper2 );


            // jiujingdeng.scene.add(fire);
            // jiujingdeng.scene.children[0].children[0].add( fire );

            gltf.scene.traverse( function ( child ) {

                if ( child.isMesh ) {

                    // child.material.envMap = envMap;

                }

            } );
            scene.add( gltf.scene );
            console.log(gltf);

            animate();

        } );










        window.addEventListener( 'resize', onWindowResize, false );
        window.addEventListener( 'mousemove', onMouseMove, false );
        window.addEventListener( 'mousedown', onMouseDown, false );
        window.addEventListener( 'mouseup', onMouseUp, false );

    }

    function openjiujingdeng(){
        mixerjiujingdeng = new THREE.AnimationMixer( jiujingdeng.scene );
        let AnimationAction = mixerjiujingdeng.clipAction( jiujingdeng.animations[ 0 ]); //返回动画操作对象
        // AnimationAction.timeScale = 5; //默认1，可以调节播放速度
        AnimationAction.loop = THREE.LoopOnce; //不循环播放
        AnimationAction.clampWhenFinished = true; //暂停在最后一帧播放的状态
        // 设置播放区间10~18   关键帧数据总时间是20
        AnimationAction.time = 0; //操作对象设置开始播放时间
        jiujingdeng.animations[ 0 ].duration = 2;//剪辑对象设置播放结束时间
        AnimationAction.play(); //开始播放
        boolopendengmao = true;
    }
    function openhuochai(){
        mixerhuochai = new THREE.AnimationMixer( huochai.scene );
        openhuochaiaction = mixerhuochai.clipAction( huochai.animations[ 0 ]); //返回动画操作对象
        // AnimationAction.timeScale = 5; //默认1，可以调节播放速度
        openhuochaiaction.loop = THREE.LoopOnce; //不循环播放
        openhuochaiaction.clampWhenFinished = true; //暂停在最后一帧播放的状态
        // 设置播放区间10~18   关键帧数据总时间是20
        openhuochaiaction.time = 0; //操作对象设置开始播放时间
        huochai.animations[ 0 ].duration = 0.5;//剪辑对象设置播放结束时间
        if (!boolOpenhuochai){
            openhuochaiaction.play(); //开始播放
            let audio = document.getElementById( "audioPlay" );
            audio.play();
        }
        boolOpenhuochai = true;



        firesprit.scale.set(0.15,0.3,0.15);

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }
    function onMouseMove( event ) {

        // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)

        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    }
    function onMouseDown() {

        console.log('按下了鼠标');
        // console.log(openhuochaiaction);
        // console.log(jiujingdeng);
        console.log(huochai.scene.children[0].position);
        // console.log(huochai.scene.children[0].children[0].position);


        // 通过摄像机和鼠标位置更新射线
        raycaster.setFromCamera( mouse, camera );

        // 计算物体和射线的焦点 酒精灯帽
        let intersectsjiujingdeng = raycaster.intersectObjects( jiujingdeng.scene.children );
        console.log(intersectsjiujingdeng);
        let boolclickjiujingdengmao = false;
        for ( let i = 0; i < intersectsjiujingdeng.length; i++ ) {
            if(intersectsjiujingdeng[ i ].object.name === 'jiujingdengmao'){
               boolclickjiujingdengmao = true;
            }
        }
        if (!boolopendengmao && boolclickjiujingdengmao){
            openjiujingdeng();
        }


        // 计算物体和射线的焦点 火柴和火柴盒
        let intersectshuochai = raycaster.intersectObjects( huochai.scene.children );
        console.log(intersectshuochai);
        let boolclickhuochai = false;
        for ( i = 0; i < intersectshuochai.length; i++ ) {
            // intersectshuochai[ i ].object.material.color.set( 0xff0000 );
            if(intersectshuochai[ i ].object.name === 'huochai' || intersectshuochai[ i ].object.name === 'huochaihe'){
                boolclickhuochai = true;
            }
        }
        if (boolclickhuochai){
            openhuochai();
        }
    }
    function onMouseUp() {
        setTimeout(function () {
            controls.activate();
        },100);

    }

    function animate() {

        requestAnimationFrame( animate );

        if(mixerhuochai&&mixerjiujingdeng){
            let delta = clock.getDelta();
            mixerjiujingdeng.update( delta );
            mixerhuochai.update( delta );
        }

        // orbiControls.update();
        renderer.render( scene, camera );

    }


</script>

</body>
</html>
